var dv=document.getElementById("dv");

document.getElementById("btn").onclick=function(){
	console.log("点击事件发生");
	//创建一个节点样式
	var ball=document.createElement('div');
	//随机改变颜色
	var colors=["red","yellow","blue","green","white"];
	var shuiji=Math.floor(Math.random()*5);
	//设置它的样式
	ball.style.cssText="position: absolute;border-radius: 50%;"
	//宽高也随机吧
	var shuiHW=Math.floor(Math.random()*40+10);
	ball.style.width=shuiHW+"px";
	ball.style.height=shuiHW+"px";
	ball.style.backgroundColor=colors[shuiji];
	//把它追加到dv里面
	dv.appendChild(ball);
	//指定位置
	//获取所在区域的宽高clientHeight,clientWidth
	//获取本身的宽高,offsetHeight,offsetWidth
	var top=dv.clientHeight/2-ball.offsetHeight/2;
	var left=dv.clientWidth/2-ball.offsetWidth/2;
	//记得指定单位
	ball.style.left=left+"px";
	ball.style.top=top+"px";
	//移动,随机的方向
	var x=Math.floor(Math.random()*10)+1;
	var y=Math.floor(Math.random()*10)+1;
	//每隔0.05秒执行一次
	setInterval(function(){
		left+=x;
		top+=y;
		//触碰界线后改方向
		if(left<0 || left>(dv.offsetWidth-ball.offsetWidth)){
			x=-x;
		}
		if(top<0 || top>(dv.offsetHeight-ball.offsetHeight)){
			y=-y;
		}
		ball.style.left=left+"px";
		ball.style.top=top+"px";
	},Math.floor(Math.random()*50+1));
};